
import { useIntersectionObserver } from '@vueuse/core'

export const imgLazyLoadPlugin = {
  install(app){
    // 懒加载指令逻辑
    app.directive('img-lazy-load',
      {
        mounted(el, binding) {
          // el: 指令绑定的哪个元素 -- 图片的DOM对象img
          // binding: 指令相关的对象 -- binding.value{value:图片的默认地址}
          //console.log(el, binding.value);
          const { stop } = useIntersectionObserver( // 监听图片是否进入视口区域 -- vueUse函数
            el,
            ([entry]) => {
            //([{ isIntersecting }]) => {
              //console.log(isIntersecting);
              if (entry?.isIntersecting) {
              //if (isIntersecting) {
                //进入视口区域
                el.src = binding.value
                stop()
              }
            },
          )
        }
      }
    )
  }
}
